<template>
 <div class="box">
    <div class="box-right">
       <el-row :gutter="64">
        <el-col :span="5" v-for="(activity, index3) in tabletada"
                    :key="index3"  class="box-bottom">
          <el-card :body-style="{ padding: '0px' }">
            <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> -->
            <div style="padding: 14px;">
              <div class="bottom"  >
                  <span>{{activity.title}}</span><span>{{activity.key}}</span>
                <el-switch
                  v-model="value1">
                </el-switch>
              </div>
              <div class="bottom">
               <div>
                  <time class="time">{{ currentDate }}</time>
               </div>
                <div>
                  <el-button type="primary" @click="search(activity)">查看</el-button>
                 <el-button type="primary" @click ="add">添加</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
  </div>
  <!-- 查看配置信息 --> 
  <Search :elideVisible="elideVisible" @changeShow="showAddOrUpdate" :myMsg="myMsg"></Search>
  <!-- 添加配置信息 -->
  <Add :addVisible="addVisible" @Addshow="showAdd" ></Add>
  </div>
</template>
<script>
import Search  from "./components/search.vue";
import Add from "./components/add.vue"
import {thirdPartySwitchList}  from "@/api/user";

  export default {
    name: 'print',
    data(){
      return{
        currentDate:"已启动配置",
        value1:"",
        params:{
          key:""
        },
        tabletada:[],
        myMsg:"",
        elideVisible:false,
        addVisible:false,
      }
    },
     components:{
      Search,
      Add
    },
    created(){
      // this.list(); 
      this.Backenddata();
    },
    methods:{
      Backenddata(){
          thirdPartySwitchList().then((response)=>{
          console.log(response.data);
          this.tabletada=response.data;
      })
      },
      search(activity){                       
        var activitykey =activity.key;
        this.myMsg=activitykey;
        console.log(this.myMsg)
       this.elideVisible=true;
      },
      
      add(){
        console.log("res");
        this.addVisible=true;
      },
      showAddOrUpdate(data){
        if(data === 'false'){
            this.elideVisible = false
        }else{
            this.elideVisible = true
        }
    },
      showAdd(datas){
        console.log(datas);
          if(datas === 'false'){
              this.addVisible = false
          }else{
              this.addVisible = true
          }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .box{
    height:100%;
    padding:16px 16px 16px 16px;
    .box-right{
      padding:20px 20px;
      // display: flex;
      //   justify-content: right;
      //   align-content: center;
      .box-row{
        
      }
    }
    .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    display:flex;
    justify-content: space-between;
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .box-bottom{
    margin-top:40px;
  }
  }
</style>
